<template>
  <div class="father">
    <son :name="name" :age="age" @show="showInfo" :changeAge="changeAge" />
    <div
      class="info"
      :style="{
        margin: '20px 0'
      }"
      v-if="isShow"
    >
      <div class="name">姓名：夜殇</div>
      <div class="age">年龄{{ age }}</div>
      <div class="favo">爱好：女</div>
      <div>长相：帅</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'father',
  components: {
    Son: () => import('./Son')
  },
  data() {
    return {
      name: '夜殇',
      age: 18,
      isShow: false
    }
  },
  methods: {
    showInfo() {
      this.isShow = !this.isShow
    },
    changeAge() {
      this.age = this.age - 1
    }
  }
}
</script>
